<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车弹框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #pay {
            float: left;
            border: 5px solid #e2e2e2;
            width: 120%;
            margin: auto;
            padding-bottom: 40px;
            background: #ffffff;
            overflow: hidden;
        }

        .one {
            color: #6ba063;
            text-indent: 2em;
            font-size: 14px;
            line-height: 40px;
            border-bottom: 1px solid #e2e2e2;
        }

        .qian {
            overflow: hidden;
        }

        .jiage {
            margin-left: 4%;
            width: 50%;
            line-height: 24px;
            font-size: 24px;
            color: red;
            text-indent: 1em;
            display: inline-block;
            margin-top: 20px;
        }

        .yuanjia {
            width: 40%;
            margin-top: 25px;
            float: left;
            line-height: 18px;
            font-size: 18px;
            color: #b7b7b7;
            text-indent: 0.5em;
            text-decoration: line-through;
        }

        .guige {
            margin-top: 20px;
        }

        .guige,
        .guige-two {
            overflow: hidden;
        }

        .guige div:nth-child(1) p,
        .guige-two div:nth-child(1) p {
            width: 20%;
            height: 30px;
            margin-left: 12%;
            margin-top: 2%;
            float: left;
            text-align: center;


        }

        .guige div:nth-child(1) p {
            font-size: 14px;
        }

        .guige div:nth-child(2) p,
        .guige-two div:nth-child(2) p {
            margin-top: 1%;
            margin-left: 1%;
            text-align: center;
            width: 20%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e2e2e2;
            float: left;
            cursor: pointer;
        }

        .guige div:nth-child(3) p,
        .guige-two div:nth-child(3) p {
            margin-top: 1%;
            text-align: center;
            width: 20%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e2e2e2;
            float: left;
            margin-left: 2%;
            cursor: pointer;
            /* border: 1px solid red; */
        }

        .guige div:nth-child(4) p {
            margin-top: 1%;
            text-align: center;
            width: 20%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e2e2e2;
            float: left;
            margin-left: 2%;
            cursor: pointer;
            /* border: 1px solid red; */
        }

        .guige-two div:nth-child(1) p {
            margin-top: 5%;
            /* border: 1px solid red; */
        }

        .guige-two div:nth-child(2) p,
        .guige-two div:nth-child(3) p {
            margin-top: 4%;
            /* border: 1px solid red; */
        }

        .num {
            width: 100%;
            height: 80px;
            overflow: hidden;
            margin-top: 1.5%;
        }

        .num-first {
            float: left;
            margin-top: 3.5%;
            margin-left: 13%;

        }

        .Numb {
            float: left;
            width: 30%;
            height: 30px;
            margin-top: 2%;
        }

        .Numb div {
            width: 30%;
            height: 30px;
            float: left;
        }

        .Numb div:nth-child(2) {
            width: 40%;
        }

        .Numb-one,
        .Numb-two,
        .Numb-three {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 20px;
            color: #cccccc;
            background: #f2f2f2;
            float: left;
            cursor: pointer;
            border-style: none;
        }

        .Numb-two {
            color: #666666;
            background: #ffffff;
            border: 1px solid #f2f2f2;
        }

        .tianjia {
            width: 100%;
            height: 30px;
            margin-top: 2%;
            /* padding-top: 20px; */

        }

        .g1 {
            /* width: 30%; */
            /* border:1px solid red; */
            float: left;
            margin-top: 8px;
            margin-left: 12%;
        }

        .g2 {
            float: left;
            margin-top: 20px;
            margin-left: 12%;
        }

        .tianjia input {
            width: 30%;
            height: 30px;
            background: #f08200;
            color: white;
            border-radius: 5px;
            margin-left: 13%;
            border-style: none;
            cursor: pointer;
            display: block;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="pay">
        <h6 class="one">请选择产品规格</h6>
        <div class="qian">
            <div>
                <span class="jiage">现价：￥20.0</span>
            </div>
            <div>
                <span class="yuanjia">原价：￥40.0</span>
            </div>
        </div>
        <div class="guige">
            <div class="g1">
                <h4>请选择规格</h4>
            </div>
            <div>
                <p>500g</p>
            </div>
            <div>
                <p>1000g</p>
            </div>
            <div>
                <p>2000g</p>
            </div>
        </div>
        <div class="guige-two">
            <div class="g2">
                <h4>请选择规格</h4>
            </div>
            <div>
                <p>500g</p>
            </div>
            <div>
                <p>1000g</p>
            </div>
        </div>
        <div class="num">
            <div class="num-first">
                <h4>数量：</h4>
            </div>
            <div class="Numb">
                <div>
                    <input class="Numb-one" type="button" value="-">
                </div>
                <div>
                    <p class="Numb-two">0</p>

                </div>
                <div>
                    <input class="Numb-three" type="button" value="+">
                </div>
            </div>
        </div>
        <div class="tianjia">
            <input type="button" value="添加到购物车">
        </div>

    </div>
</body>

</html>
<script>
    $('.tianjia').click(function () {
        $('#myModal').modal('hide')
    })
    $('.Numb-three').on("click", function () {

        let num = $('.Numb-two').html();
        num++;
        $('.Numb-two').html(num);

    })
    $('.Numb-one').on("click", function () {
        let num = $(".Numb-two").html();
        num--;
        if (num < 0) {
            num = 0;
        }
        $(".Numb-two").html(num);
    })


    // 添加
    // $('.tianjia').click(function () {
    //     $.ajax({
    //         url: 'http://localhost:8080/pay/p',
    //         type: 'post',
    //         data: {
    //             id: localStorage.getItem('userID'),
    //             goods_id: localStorage.getItem('goodID'),
    //             car_img: './images/lyjimg/friday2.png',
    //             car_name: $('h4').html(),
    //             car_num: $('.num').html(),
    //             car_zl: $('.Number').html(),
    //             car_price: $('#price').html(),
    //         },
    //         dataType: 'json',
    //         success: (data) => {
    //             console.log(data);
    //         },
    //         error: (xhr, err) => {
    //             console.error(err);
    //         }
    //     })
    // })


    // var onoff=true;
    $("p").each(function () {
        this.onoff = true;
        $(this).click(function () {
            if (this.onoff) {
                $(this).css('border', '1px solid red');
                this.onoff = false;
            } else {
                $(this).css('border', '1px solid #e2e2e2');
                this.onoff = true;
            }
        });
    });



</script>